<template>
  <div>
    <div class="header">
        <div class="header-box">
        <HeaderNav/>
        </div>
     </div>
    <div class="main">
        <div class="main-box">
           <MainBoxLeft/>
           <!-- 根据路径变化内容 -->
           <div class="main-box-right">
             <router-view :key="$route.path"></router-view>
           </div>
        </div>
        <div class="footer">
            <div class="footer-box">
            <Footer/>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import MainBoxLeft from '../components/ly/MainBoxLeft'
import HeaderNav from '../components/ld/header'
import Footer from '../components/ld/footer.vue'
export default {
  name:'personal',
  components:{MainBoxLeft,HeaderNav,Footer}
}
</script>


<style lang="less">
@navcolor: rgb(58, 58, 58);
@navfont: 13px;
@width: 1200px;
@hovercolor: #76d4ff;
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
input {
  outline: none;
}
li {
  list-style: none;
}
.header{
  width: 100%;
  background-color: rgb(248,248,248);
  .header-box{
      width: @width;
      margin: 0 auto;
  }
}
.footer{
  margin-top: 80px;
  width: 100%;
  background-color: rgb(26,26,26);
  .footer-box{
      width: @width;
      margin: 0 auto;
  }
}
.main {
  margin-top: 20px;
  width: 100%;
  position: absolute;
  .main-box {
    width: @width;
    margin: 0 auto;
    &::after {
      content: "";
      display: block;
      clear: both;
    }
  }
}

</style>
